import { Upload, Card, Button, Row, Col, Space, message } from 'antd';
import { EyeOutlined, UploadOutlined } from '@ant-design/icons';
import { useState } from 'react';

import PDFViewer from './PDFViewer';

const QREditor = () => {

    const [loading, setLoading] = useState(false);
    const [filePath, setFilePath] = useState(null);

    const handlePreview = () => {
        message.info('预览PDF');
    }
    const handleSelectFile = async () => {
        try {
            setLoading(true);
            const filePath = await window.attach.selectFile();
            setFilePath(filePath);
            message.success('PDF文件加载成功');
            setLoading(false);
        } catch (error) {
            message.error('PDF文件加载失败');
        } finally {
            setLoading(false);
        }
    }

    return (
        <div>
            <Row gutter={[16, 16]}>
                <Col span={8}>
                    <Card title="操作文件" style={{ marginBottom: 16 }}>
                        <Space direction="vertical" style={{ width: '100%' }}>
                            <Button
                                type="primary"
                                icon={<UploadOutlined />}
                                onClick={handleSelectFile}
                                loading={loading}
                                block
                            >
                                选择文件
                            </Button>
                            <Button
                                icon={<EyeOutlined />}
                                onClick={handlePreview}
                                block
                            >
                                预览文件
                            </Button>
                        </Space>
                    </Card>
                </Col>
                <Col span={16}>
                    <PDFViewer filePath={filePath} />
                </Col>
            </Row>
        </div>
    )
}

export default QREditor
